<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/layout/template.xhtml">


	<ui:define name="body">


		<a4j:form id="clienteForm">
			<p:messages globalOnly="true" styleClass="message" />

			<rich:simpleTogglePanel switchType="client">
				<f:facet name="header">Cliente</f:facet>
				<div style="clear: both" />

				<s:decorate id="pessoaField" template="/layout/edit.xhtml" rendered="false">
					<ui:define name="label">Tipo Pessoa</ui:define>

					<h:selectOneMenu value="#{cliente.tipoPessoa}" required="false">
						<s:selectItems var="tipoPessoa" value="#{tipoPessoaFactory}"
							label="#{tipoPessoa.valor}" />
						<s:convertEnum />
						<a4j:support event="onchange" reRender="pessoaField"
							ajaxSingle="true" status="none"/>
					</h:selectOneMenu>

				</s:decorate>

				<s:decorate id="nameField" template="/layout/edit.xhtml">
					<ui:define name="label">Nome</ui:define>
					<h:inputText id="name" size="50" value="#{cliente.nome}"
						required="true">
						<a4j:support event="onblur" reRender="nameField"
							bypassUpdates="true" ajaxSingle="true" status="none"/>
					</h:inputText>
				</s:decorate>

				<a4j:region id="valCPFCliente">
					<s:decorate id="cpfField" template="/layout/edit.xhtml">
						<ui:define name="label">CPF</ui:define>
						<p:inputMask value="#{cliente.cpf}" mask="999.999.999-99"
							required="#{not identity.hasRole('admin')}" id="cpf"
							validator="#{validatorProject.validateCPF}">
							<a4j:support event="onblur" reRender="cpfField"
								bypassUpdates="true" ajaxSingle="true" eventsQueue="foo2"/>
						</p:inputMask>
						<a4j:status for="valCPFCliente">
							<f:facet name="start">
								<h:graphicImage value="/img/carregando_.gif" />
							</f:facet>
						</a4j:status>
					</s:decorate>
				</a4j:region>

				<a4j:region id="valEmailCliente">
					<s:decorate id="emailField" template="/layout/edit.xhtml">
						<ui:define name="label">Email</ui:define>
						<h:inputText id="email" size="50" value="#{cliente.email}"
							required="true" validator="#{validatorProject.validateEmail}">
							<s:validate />
							<a4j:support event="onblur" reRender="emailField"
								bypassUpdates="true" ajaxSingle="true" eventsQueue="foo2" />
						</h:inputText>
						<a4j:status for="valEmailCliente">
							<f:facet name="start">
								<h:graphicImage value="/img/carregando_.gif" />
							</f:facet>
						</a4j:status>
					</s:decorate>
				</a4j:region>
				<s:decorate id="telField" template="/layout/edit.xhtml">
					<ui:define name="label">Telefone</ui:define>
					<p:inputMask id="tel" value="#{cliente.tel}"
						required="#{not identity.hasRole('admin')}" mask="(99)9999-9999">
						<a4j:support event="onblur" reRender="telField"
							bypassUpdates="true" ajaxSingle="true" status="none"/>
					</p:inputMask>
				</s:decorate>

				<s:decorate id="celField" template="/layout/edit.xhtml">
					<ui:define name="label">Celular</ui:define>
					<p:inputMask id="cel" value="#{cliente.cel}"
						required="#{not identity.hasRole('admin')}" mask="(99)9999-9999">
						<a4j:support event="onblur" reRender="celField"
							bypassUpdates="true" ajaxSingle="true" status="none"/>
					</p:inputMask>
				</s:decorate>


				<s:decorate id="enderecoField" template="/layout/edit.xhtml">
					<ui:define name="label">Endereço</ui:define>
					<h:inputText id="endereco" size="50" value="#{cliente.endereco}"
						required="false">
						<a4j:support event="onblur" reRender="enderecoField"
							bypassUpdates="true" ajaxSingle="true" status="none"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="numeroField" template="/layout/edit.xhtml">
					<ui:define name="label">Número</ui:define>
					<h:inputText id="numero" size="10" value="#{cliente.numero}"
						required="false">
						<a4j:support event="onblur" reRender="numeroField"
							bypassUpdates="true" ajaxSingle="true"  status="none"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="complementoField" template="/layout/edit.xhtml">
					<ui:define name="label">Complemento</ui:define>
					<h:inputText id="complemento" size="50"
						value="#{cliente.complemento}" required="false">
						<a4j:support event="onblur" reRender="complementoField"
							bypassUpdates="true" ajaxSingle="true"  status="none"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="bairroField" template="/layout/edit.xhtml">
					<ui:define name="label">Bairro</ui:define>
					<h:inputText id="bairro" size="50" value="#{cliente.bairro}"
						required="false">
						<a4j:support event="onblur" reRender="bairroField"
							bypassUpdates="true" ajaxSingle="true"  status="none"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="cidadeField" template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['field.cidade']}</ui:define>
					<h:inputText id="cidade" size="50" value="#{cliente.cidade}"
						required="false">
						<a4j:support event="onblur" reRender="cidadeField"
							bypassUpdates="true" ajaxSingle="true"  status="none"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="estadoField" template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['field.estado']}</ui:define>
					<h:selectOneMenu value="#{cliente.estado}" required="false">
						<s:selectItems var="estado" value="#{estadoFactory}"
							label="#{estado.valor}" noSelectionLabel="-- Selecione --" />
						<s:convertEnum />
					</h:selectOneMenu>
					<a4j:support event="onblur" reRender="estadoField"
						bypassUpdates="true" ajaxSingle="true"  status="none"/>
				</s:decorate>

				<s:decorate id="cepField" template="/layout/edit.xhtml">
					<ui:define name="label">CEP</ui:define>
					<p:inputMask value="#{cliente.cep}" mask="99.999-999"
						required="false" id="cep"  status="none"/>
				</s:decorate>



				<br />
				<br />
				<div style="clear: both"><span class="required">*</span>
				Campos requeridos</div>

				<div style="clear: both" />
				<br />
				<br />
				<div class="actionButtons"><a4j:commandButton value="Inserir"
					style=" width : 100px;" action="#{clienteAction.salvar(cliente)}"
					rendered="#{cliente.id == null}"
					reRender="clienteForm, frmTabelaCliente" /> <a4j:commandButton
					value="Editar" style=" width : 100px;"
					action="#{clienteAction.alterar(cliente)}"
					rendered="#{cliente.id != null}"
					reRender="clienteForm, frmTabelaCliente" /> <a4j:commandButton
					value="#{messages['btnCancel']}" style="width : 100px;"
					action="#{clienteAction.cancelar()}"
					rendered="#{cliente.id != null}" reRender="clienteForm"
					ajaxSingle="true" /></div>

			</rich:simpleTogglePanel>

		</a4j:form>



		<rich:spacer width="5px" />
		<br />
		<br />

		<a4j:form id="frmTabelaCliente"
			rendered="#{!identity.hasRole('tecnico')}">

			<rich:dataTable value="#{clienteAction.carregarTodos()}"
				var="cliente" rows="10" reRender="ds" id="simpletable"
				rendered="#{clienteAction.carregarTodos().size > 0}"
				columnClasses="center"
				onRowMouseOver="this.style.backgroundColor='#b2d5d6'"
				onRowMouseOut="this.style.backgroundColor='#FFFFFF'">
				<f:facet name="header">
					<h:outputText value="Cliente" />
				</f:facet>
				<rich:column sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
					<f:facet name="header">
						<h:outputText value="Nome" />
					</f:facet>
					<h:outputText value="#{cliente.nome}" />
				</rich:column>
				<rich:column sortBy="#{cliente.email}" filterBy="#{cliente.email}">
					<f:facet name="header">
						<h:outputText value="Email" />
					</f:facet>
					<h:outputText value="#{cliente.email}" />
				</rich:column>
				<rich:column sortBy="#{cliente.cpf}" filterBy="#{cliente.cpf}">
					<f:facet name="header">
						<h:outputText value="CPF" />
					</f:facet>
					<h:outputText value="#{cliente.cpf}" />
				</rich:column>
				<rich:column sortBy="#{cliente.tel}">
					<f:facet name="header">
						<h:outputText value="Telefone" />
					</f:facet>
					<h:outputText value="#{cliente.tel}" />
				</rich:column>
				<rich:column style="text-align: center;" rendered="#{identity.hasRole('admin')}">
					<f:facet name="header">
						<h:outputText value="Editar" />
					</f:facet>
					<a4j:commandLink
						action="#{clienteAction.selecionarCliente(cliente)}"
						reRender="clienteForm">
						<h:graphicImage value="/img/ico_altera_16.gif"
							style="border: none;" alt="Alterar" title="Alterar Registro" />
					</a4j:commandLink>
				</rich:column>
				<rich:column style="text-align: center;" rendered="#{identity.hasRole('admin')}">
					<f:facet name="header">
						<h:outputText value="Apagar" />
					</f:facet>
					<a4j:commandLink action="#{clienteAction.excluir(cliente)}"
						reRender="simpletable"
						onclick="if(!confirm('Confirma Exclus&#227;o?')){return false;}">
						<h:graphicImage value="/img/ico_apaga_16.gif"
							style="border: none;" alt="Excluir" title="Excluir Registro" />
					</a4j:commandLink>
				</rich:column>


				<f:facet name="footer">
					<rich:datascroller id="ds"></rich:datascroller>
				</f:facet>
			</rich:dataTable>


			<s:fragment rendered="#{clienteAction.carregarTodos().size > 0}">
				<h:outputText
					value="Total de Registros: #{clienteAction.carregarTodos().size}" />
			</s:fragment>

		</a4j:form>


	</ui:define>

</ui:composition>
